<template>
    <slot></slot>
    <uv-tabbar :value="activeIndex" @change="change" activeColor="#42b479">
        <template v-for="(item, index) in List" :key="index">
            <uv-tabbar-item :text="item.text">
                <template #active-icon>
                    <view class="iconfont" :class="item.icon" style="color:#42b479"></view>
                </template>
                <template #inactive-icon>
                    <view class="iconfont" :class="item.icon"></view>
                </template>
            </uv-tabbar-item>
        </template>
    </uv-tabbar>
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
    active: {
        type: Number,
        default: 0
    }
})
const activeIndex = ref(props.active);
const List = [
    { text: '明细', icon: 'icon-zhangdan', url: '/pages/index/index' },
    { text: '统计', icon: 'icon-tubiao-bingtu', url: '/pages/chart/chart' },
    { text: '设置', icon: 'icon-shezhi', url: '/pages/set/set' }
];
const change = (e) => {
    //防止重复点击同一个页面
    if (activeIndex.value === e) return;
    activeIndex.value = e;
    const obj = List[e];
    uni.redirectTo({
        url: obj.url
    });
}
</script>
<style lang="scss" scoped>
.iconfont {
    font-size: 40rpx;
}
</style>
